<template>
  <v-layout
    @click="showButton = true"
    class="mission-wrapper"
    py-1
    justify-center
    align-center
    wrap
  >
    <v-flex md12 class="flex-center">
      <img :src="mission.productImg" alt class="img" />
    </v-flex>

    <v-flex md12 class="of">{{ mission.titleEnglish }}</v-flex>

    <v-flex md12 class="flex-center">
      <v-layout row wrap justify-space-between>
        <v-flex md3 class="real-price">$ 0.00</v-flex>
        <v-flex md3 class="original-price">$ {{ mission.price }}</v-flex>
      </v-layout>
      <!-- <v-flex md3 title>{{ mission.taskType | TaskType }}</v-flex> -->
    </v-flex>

    <v-flex class="flex-center btn-wrapper" md12 d-flex>
      <v-btn color="primary" @click.stop="onJoinMission">
        <span>Join Mission</span>
      </v-btn>
    </v-flex>

    <div class="need-review" v-if="mission.taskType != 1">
      <span>Need Review</span>
    </div>
  </v-layout>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue, Prop } from "vue-property-decorator";
import { Api } from "@/api";
declare const $Vue: Vue;

@Component
export default class Header extends Vue {

  @Prop({})
  mission: any;

  private showButton: boolean = false;

  protected mounted() {
  }

  private onJoinMission() {

    this.joinMission(this.mission);
  }

  /**
   * 任务抢单 抢单之后可以通过上传 订单和评价截图 用于完成任务
   */
  private async joinMission(task: any) {
    const params = {
      taskId: task.taskId
    };
    const { data } = await Api.competeOrder.r(params);
    console.log("getTaskList", data);
    if (data.result === 0) {
      task.scalped = true;
      $Vue.$emit("snackbar", {
        text: data.message,
      });
      // $Vue.$emit('Missions');
      this.$router.push({
        name: 'MyMissions',
      })
    } else {
      alert(data.message);
    }
  }
}
</script>

<style lang="less">
.btn-wrapper {
  visibility: hidden;
}
.mission-wrapper {
  position: relative;
  overflow: hidden;
  &:hover {
    .btn-wrapper {
      visibility: visible;
    }
  }
  .need-review {
    position: absolute;
    transform: rotate(-45deg);
    font-size: 11px;
    line-height: 26px;
    text-align: center;
    top: 18px;
    left: -54px;
    width: 180px;
    height: 26px;
    background: #f44363;
    color: white;
  }
  .img {
    max-height: 6rem;
    height: 6rem;
    max-width: 100%;
  }
  .of {
    overflow: hidden;
    height: 6rem;
  }
}
</style>

